<template>
  <div style="background-color: yellow;padding: 10px 20px;height: 6vh;">
    <span style="font-size: 20px;line-height: 60px" >库存列表</span>
    <el-button type="primary"  style="float: right;margin-top: 10px" @click="addStorage">添加商品库存</el-button>
  </div>
<!--  商品库存弹窗-->
  <el-dialog v-model="dialogVisible" :before-close="cancel" :title="dialogTitle" style="width: 1000px;">
    <el-form label-position="top" label-width="60px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="选择选择店铺">
            <el-select v-model="storages.shopId" placeholder="选择店铺">
              <el-option v-for="item in shopList" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择商品">
            <el-select v-model="storages.goodsId" placeholder="请选择商品">
              <el-option v-for="item in productList" :label="item.goodsName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="生产日期">
            <el-date-picker v-model="storages.productionDate" type="date" placeholder="选择日期" ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保质天数">
            <el-select placeholder="选择天数" v-model="storages.warrantyPeriod">
              <el-option label="7天" value="7"></el-option>
              <el-option label="15天" value="15"></el-option>
              <el-option label="30天" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="储藏方式">
            <el-radio-group v-model="storages.storageMode">
              <el-radio border label="常温" value="0"></el-radio>
              <el-radio border label="冷藏" value="1"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20" type="">
        <el-col :span="8">
          <el-form-item label="商品销量">
            <el-input  v-model="storages.sales" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品库存">
            <el-input placeholder="请输入商品库存" v-model="storages.storage" ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商品销售单位">
            <el-select placeholder="选择商品销售单位" v-model="storages.sales_unit">
              <el-option v-for="item in salesUnitList" :label="item.label" :value="item.value"></el-option>

            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>

    </template>

  </el-dialog>
<!--  商品信息弹窗结束-->
<!--查询库存卡片-->
  <el-card style="margin: 20px;height: 70px;background-color: #42b983">
    <el-form :inline="true">
      <el-form-item label="店铺名称" style="width: 290px">
        <el-select  placeholder="请选择店铺" v-model="storageSearchForm.shopId">
          <el-option v-for="item in shopList" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item >

      <el-form-item label="商品名字" style="width: 290px">
        <el-input  placeholder="请输入商品名字" v-model="storageSearchForm.goodsName"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadStorage">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--  商品列表卡片-->
  <el-card style="margin: 20px">
    <el-table  stripe  :data="StorageList">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="店铺名称" prop="shopId" align="center"></el-table-column>
      <el-table-column label="商品名称" prop="goodsId" align="center" ></el-table-column>


      <el-table-column label="存储量" prop="storage" align="center"></el-table-column>

      <el-table-column label="销量" prop="sales" align="center"></el-table-column>



      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editStorage(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deleteStorage(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>

  </el-card>






</template>
<script setup>

import {onMounted, ref} from "vue";
import axios   from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
// 弹窗是否显示变量,弹窗名字
const  dialogVisible = ref(false);
const dialogTitle = ref("库存");
// 定义 添加库存按钮 方法
const addStorage=()=>{
  dialogVisible.value=true;
  dialogTitle.value="添加商品库存"
};
//定义数组，保存店铺名称
const shopList=ref([]);
//定义方法 加载所有的店铺
// 定义加载店铺的方法
const loadShops = () => {

  axios.get(BASE_URL+'/v1/shop/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          shopList.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      });
};

//定义数组，保存所有商品
const productList=ref([]);
/// 定义方法加载商品
const  loadproduct=()=>{
  axios.get(BASE_URL+'/v1/product/select?')
      .then((response)=>{
        if (response.data.code==2000){
          productList.value=response.data.data;

        }else{
          ElMessage.error(response.data.msg);
        }
      })

};
// 定义对象，保存弹窗数据
const storages=ref({
  storageId:'',
  goodsId:'',
  shopId:'',
  storage:'',
  sales:'',
  productionDate:'',
  warrantyPeriod:'',
  storageMode:'',
  sales_unit: '',

});
//定义方法，保存弹窗数据
const save=()=>{
  let data=qs.stringify(storages.value);
  axios.post(BASE_URL+'v1/storage/save'+data)
      .then((response)=>{
        if (response.data.code==2000){
          storages.value={};
          dialogVisible.value=false;
          loadStorage();
        }
        else {
          ElMessage.error(response.data.msg);
          dialogVisible.value = false;
        }
      })

};

// 取消保存
const cancel = ()=>{
  if (confirm("您确认关闭该窗口吗？")){
    dialogVisible.value = false;
    storages.value={};

  }
};

//定义查询条件对象
const storageSearchForm=ref({
  shopId:'',
  goodsName:'',
});
//定义数组保存查询结果
const StorageList=ref([]);

//定义加载库存的方法
const loadStorage=()=>{
  let data=qs.stringify(storageSearchForm.value);
  console.log('查询参数：'+data)
  axios.get(BASE_URL+'/v1/storage/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          StorageList.value=response.data.data;

        }else{
          ElMessage.error(response.data.msg);
        }
      })

};

// 定义方法，重置查询条件
const resetSearch=()=>{
  storageSearchForm.value={};
  loadStorage();
};

// 定义数组保存销售单位信息
const  salesUnitList=ref([]);
onMounted(()=>{

  loadDictOption(salesUnitList,'sales_unit');
  loadStorage();

});

//定义编辑库存方法
const editStorage=(id)=>{
  axios.get(BASE_URL+'/v1/storage/select?id='+id)
      .then((response)=>{
        if (response.data.code==2000){
          storages.value=response.data.data[0];
          dialogVisible.value=true;
          dialogTitle.value="编辑库存";
        }else{
          ElMessage.error(response.data.msg);
        }
      })

};

//定义删除库存方法
const deleteStorage=(id)=>{
  if (confirm("您确认删除该库存吗？")){
    axios.get(BASE_URL+'/v1/storage/delete?id='+id)
        .then((response)=>{
          if (response.data.code==2000){
            loadStorage();
          }else{
            ElMessage.error(response.data.msg);
          }
        })

  }

};



</script>


<style scoped>

</style>